<template>
<transition name="move">
  <div class="compare-file" v-if="showComponent" @dragenter="onDragEnter"
       @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop">
    <dl v-for="(file, fileIndex) in compareList" :key="fileIndex" class="relative-position">
      <dt><q-icon @click="removeFile(fileIndex)" name="iconfont icontubiao-67" color="white" class="removeFile" /></dt>
      <dt>
        <q-icon :name="'img:statics/svg/'+file.type+'.svg'" style="font-size: 36px;"></q-icon>
      </dt>
      <dd class="full-width">
        <div class="ellipsis text-ellipsis text-white full-width text-center">{{file.label}}</div>
      </dd>
    </dl>
    <q-btn @click="compare()" class="btn" unelevated type="button" color="primary" label="对比" />
    <q-btn @click="showMachineFileDialog()" class="btn" unelevated type="button"
           color="white" text-color="primary" label="从机台选择" />
    <q-btn class="btn" unelevated type="button"
           color="white" text-color="primary" label="从本地选择">
      <input ref="uploadInput" type="file" @change="getLocalFile($event)"
             class="q-uploader__input overflow-hidden absolute-full" />
    </q-btn>
    <q-icon @click="hide" name="iconfont icontubiao-67" color="white" class="hide" />
    <machine-file-dialog ref="machineFileDialog" :client="client" :requestId="requestId" @submit="getMachineFile" />
  </div>
</transition>
</template>

<script>
import { getFiletype, isUploadFile } from 'src/assets/js/util'
import MachineFileDialog from './machine-file-dialog'

import _ from 'lodash'
export default {
  name: 'compare-file',
  props: {
    dragItem: {
      type: Array
    },
    client: {},
    // mqtt唯一标识
    requestId: {
      type: [String, Number]
    }
  },
  data () {
    return {
      showComponent: false, // 显示该组件
      compareList: []
    }
  },
  methods: {
    show (file) {
      this.showComponent = true
      if (file !== undefined) {
        this.initInfo(file)
      }
    },
    hide () {
      this.showComponent = false
      this.compareList = []
    },
    // 初始化数据
    initInfo (file) {
      if (isUploadFile(file.name) || file.type.indexOf('img') > -1) {
        this.errMessage('该类型文件无法进行对比')
        return false
      }
      if (this.isExist(file)) {
        this.errMessage('文件已存在')
        return false
      }
      if (this.compareList.length < 2) {
        this.compareList.push(file)
      } else {
        this.errMessage('最多对比两个文件!')
      }
    },
    // 判断文件是否已存在
    isExist (file) {
      let isExist = false
      console.log(this.compareList)
      this.compareList.forEach(item => {
        console.log(item)
        if (item.source === file.source && item.label === file.label) {
          isExist = true
        }
      })
      return isExist
    },
    // 移除文件
    removeFile (fileIndex) {
      this.compareList.splice(fileIndex, 1)
      if (this.compareList.length === 0) {
        this.hide()
      }
    },
    // 点击对比按钮
    compare () {
      if (this.compareList.length !== 2) {
        this.$message.error('只允许两个文件进行对比')
        return false
      }
      this.$emit('compare', this.compareList)
    },
    // 失败提示
    errMessage (message) {
      this.$message.error(message)
    },
    // 拖动功能
    // store the id of the draggable element
    onDragStart (e, dragItem) {
      e.dataTransfer.setData('text', e.target.id)
      e.dataTransfer.dropEffect = 'move'
      const index = this.actFile.findIndex(file => {
        return file.id === dragItem.id
      })
      if (index === -1) {
        this.actFile.push(dragItem)
      }
      this.$emit('setDragItem', this.actFile)
    },
    onDragEnter (e) {
      // don't drop on other draggables
      if (e.target.draggable !== true) {
        e.target.classList.add('drag-enter')
      }
    },
    onDragLeave (e) {
      e.target.classList.remove('drag-enter')
    },
    onDragOver (e) {
      e.preventDefault()
    },
    onDrop (e) {
      e.preventDefault()

      // don't drop on other draggables
      if (e.target.draggable === true) {
        return
      }

      if (this.dragItem.length > 1) {
        this.errMessage('对比列表只允许加单个文件')
        return false
      }
      this.initInfo(this.dragItem[0])
    },
    // 获取本地文件
    getLocalFile (event) {
      let file = event.target.files[0]
      if (!file) return
      let type = getFiletype(file.name)
      let compareLocalItem = {
        size: file.size,
        timestamp: file.lastModified,
        label: file.name,
        name: file.name,
        path: file.path || '',
        icon: 'img:statics/svg/' + type + '.svg',
        isFile: true,
        source: 'local',
        file,
        type
      }
      this.initInfo(compareLocalItem)
      event.target.value = ''
    },
    // 获取机床文件
    getMachineFile (machineFile) {
      if (!_.has(machineFile, 'id')) return
      _.set(machineFile, 'name', machineFile.label)
      this.initInfo(machineFile)
    },
    // 显示机床文件选择弹框
    showMachineFileDialog () {
      this.$refs.machineFileDialog.showDialog()
    }
  },
  components: {
    MachineFileDialog
  }
}
</script>

<style scoped lang="stylus">
.compare-file{
  position fixed
  left 0
  bottom 0
  right 0
  z-index 1100
  padding 10px 30px
  height 95px
  background-color rgba(0, 0, 0, 0.5)
  display flex
  align-items center
  .hide{
    position absolute
    top 10px
    right 20px
  }
  .btn{
    min-width 96px
    min-height 32px
    font-size 16px
    margin-right 10px
  }
  dl{
    display flex
    flex-direction column
    align-items center
    justify-content center
    padding 4px
    width 80px
    height 80px
    margin-right 10px
    border 1px dashed #fff
    .removeFile{
      position absolute
      top 4px
      right 4px
      font-size 12px
      padding 0
    }
  }
}
</style>
